<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #message {
            margin: 20px 0;
            font-size: 1.2em;
            color: red;
        }
        #guessButton {
            padding: 10px 20px;
            font-size: 1em;
        }
    </style>
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>我已经想好了一个1到100之间的数字。</p>
    <input type="number" id="userGuess" placeholder="请输入你的猜测">
    <button id="guessButton">提交猜测</button>
    <p id="message"></p>

    <script>
        let targetNumber = Math.floor(Math.random() * 100) + 1;

        document.getElementById('guessButton').addEventListener('click', function() {
            const userGuess = parseInt(document.getElementById('userGuess').value);
            const messageElement = document.getElementById('message');

            if (isNaN(userGuess)) {
                messageElement.textContent = "请输入一个有效的数字！";
                return;
            }

            if (userGuess < targetNumber) {
                messageElement.textContent = "猜小了，请再试一次！";
            } else if (userGuess > targetNumber) {
                messageElement.textContent = "猜大了，请再试一次！";
            } else {
                messageElement.textContent = `恭喜你，猜对了！答案就是 ${targetNumber}。`;
                // 游戏结束，可以重新开始
                targetNumber = Math.floor(Math.random() * 100) + 1;
            }
        });
    </script>
</body>
</html>